<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="tabBase tabBoxBase" src="../tabBoxBase.xml"/>

		<d:element name="tabBox" extends="b:tabBoxBase">
			

			<d:resource type="image/png" src="media/tabHead.png"/>
			<d:resource type="text/css"><![CDATA[.btl-tabBox {
	overflow: hidden;
}
.btl-tabBox-head {
	padding-top: 3px;
	overflow: hidden;
}
.btl-tabBox-tabContainer {
	padding-left: 0.2em;
	border-bottom: 1px solid #919397;
}
.btl-tabBox-head-height {
	/* element to push the height of the tabBox-head, accomplished by clearing float. */
	height: 0;
	width: 0;
	clear: both;
	overflow: hidden;
}
.btl-tabBox-content {
	background-color: #FFFFFF;
}
.btl-tab {
	float: left;
	margin-left: 4px;
	cursor: pointer;
}
.btl-tab-selected {
	margin-bottom: -1px;
}
.btl-tab-selected .btl-tab-mid {
	padding-bottom: 1px;
}
.btl-tab-background {
	/* this extra element is used to set the background color for hover/press */
}
.btl-tab-left {
	background-image: url(media/tabHead.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	padding-left: 3px;
	margin-left: -1px;
}
.btl-tab-right {
	background-image: url(media/tabHead.png);
	background-position: 100% -600px;
	background-repeat: no-repeat;
	padding-right: 3px;
	margin-right: -1px;
}
.btl-tab-mid {
	background-image: url(media/tabHead.png);
	background-position: 0 -300px;
	background-repeat: repeat-x;
}
.btl-tab-label {
	white-space: nowrap;
}
.btl-tab-hover .btl-tab-left {
	background-position: 0 -200px;
}
.btl-tab-hover .btl-tab-right {
	background-position: 100% -800px;
}
.btl-tab-hover .btl-tab-mid {
	background-position: 0 -500px;
}
.btl-tab-selected .btl-tab-left {
	background-position: 0 -100px;
}
.btl-tab-selected .btl-tab-right {
	background-position: 100% -700px;
}
.btl-tab-selected .btl-tab-mid {
	background-position: 0 -400px;
}
.btl-tab .btl-focusIndicatorContainer {
	padding: 1px 0;
}
.btl-tab .btl-focusIndicatorContainer .btl-focusIndicator .btl-label {
	padding-top: 2px;
	padding-bottom: 2px;
}
.btl-tab-content {
	overflow: auto;
	display: none;
	position: relative;
}
.btl-tab-content-selected {
	display: block;
}
/* right to left */
.btl-tabBox-rtl {
	direction: rtl;
}
.btl-tabBox-rtl .btl-tabBox-tabContainer {
	padding-left: 0;
	paggin-right: 0.2em;
}
.btl-tabBox-rtl .btl-tab {
	float: right;
	margin-left: 0;
	margin-right: 4px;
}
/* disabled */
.btl-disabled .btl-tab-label,
.btl-disabled .btl-tab-content {
	color: #aaa;
}
/* fixes */
.btl-tabBox,
.btl-tabBox *{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}
.btl-tabBox {
	position: relative; /* for focusElement */
}
.gecko .btl-tabBox,
.gecko .btl-tab-content {
	-moz-outline: none;
}
.ie .btl-tabBox-head-height {
	/* to make sure the element does not have any height in IE */
	font-size: 0;
	line-height: 0;
}
.ie .btl-tab {
/* right and left border were not visible without the padding. */
	margin-left: 2px;
	padding: 0 1px;
}
.ie6 .btl-tab {
	/* fix for bug 9969 */
	background-color: white;
}
.ie .btl-tabBox-rtl .btl-tab {
	margin-left: 0;
	margin-right: 2px;
}
.ie .btl-tabBox-content {
	zoom: 1.0; /* There are some repaint issues like content showing in the wrong position if this is not set */
	overflow: hidden; /* for correct scrolling */
}
.ie .btl-tab-content {
	width: 100%; /* for correct scrolling */
}
.ie6 .btl-tabBox-head {
	/* without zoom 1.0, the border under the tabBox head would disappear */
	zoom: 1.0;
}
.ie7 .btl-tab-selected {
	/* without position relative, the selected tab would have the head border under itself */
	position: relative;
}]]></d:resource>
			<d:resource type="text/javascript"><![CDATA[
				if(!btl.tabBox){
					btl.tabBox = {};

					btl.tabBox.setPassingFocusToFalse = function (oTabBox){
						oTabBox.__passingFocus = false;
					};
				}
			]]></d:resource>

			<!-- btl-tabBox-head-height is used in the process of adding tabs -->
			<d:template type="application/xhtml+xml">
				<div class="btl-tabBox" tabindex="-1">
					<input onbeforedeactivate="if(this.parentNode.controller.__passingFocus){return false;}" class="btl-invisibleFocusInput" style="position:absolute;top:-20px;left:-20px;" readonly="readonly"/>
					<div class="btl-tabBox-head">
						<div class="btl-tabBox-tabContainer">
							<div class="btl-tabBox-head-height"> </div>
						</div>
					</div>
					<div class="btl-tabBox-content">
						<d:content/>
					</div>
				</div>
			</d:template>

			<d:attribute name="direction" default="ltr">
				
				<d:mapper type="text/javascript"><![CDATA[
					if (value == 'rtl'){
						bb.html.addClass(this.viewNode, 'btl-tabBox-rtl');
					} else {
						bb.html.removeClass(this.viewNode, 'btl-tabBox-rtl');
					}
				]]></d:mapper>
			</d:attribute>

			<d:property name="focusTab">
				
				<d:setter type="text/javascript"><![CDATA[
					if(this._._focusTab == value) {
						return;
					}

					if(this._._focusTab) {
						var oFocusIndicator = bb.selector.query(this._._focusTab.__tabhead, '.btl-focusIndicator');
						bb.html.removeClass(oFocusIndicator, 'btl-focusIndicator-visible');
						// workaround for rendering issue in IE which causes dimensions to increase when using percentage width and height (bug 11352)
						if (bb.browser.ie) {
							this.viewNode.className += '';
						}
					}

					this._._focusTab = value;

					if(value) {
						var oFocusIndicator = bb.selector.query(this._._focusTab.__tabhead, '.btl-focusIndicator');
						bb.html.addClass(oFocusIndicator, 'btl-focusIndicator-visible');
						// workaround for rendering issue in IE which causes dimensions to increase when using percentage width and height (bug 11352)
						if (bb.browser.ie) {
							this.viewNode.className += '';
						}
					}
				]]></d:setter>
			</d:property>

			<d:property name="height">
				<d:setter type="text/javascript"><![CDATA[
					this.viewNode.style.height = value;
					this._._height = value;
					bb.ui.reflow(this, true, true);
				]]></d:setter>
			</d:property>

			<d:constructor type="text/javascript"><![CDATA[
				if(bb.browser.ie){
					var oTabBox = this;
					var fnSetPassingFocusToFalse = function(){
						oTabBox.__passingFocus = false;
					}
					this.addEventListener('mouseup', fnSetPassingFocusToFalse, false);
					this.addEventListener('mouseleave', fnSetPassingFocusToFalse, false);
					this.addEventListener('destruct', function(){
						oTabBox.removeEventListener('mouseup', fnSetPassingFocusToFalse, false);
						oTabBox.removeEventListener('mouseleave', fnSetPassingFocusToFalse, false);
					}, false);
				}
			]]></d:constructor>

			<d:handler event="DOMNodeInserted" type="text/javascript"><![CDATA[
				if(event.relatedNode == this && bb.instanceOf(event.target, btl.namespaceURI, 'tab')){
					var oTabContainer = bb.selector.query(this.viewNode, '.btl-tabBox-tabContainer');
					var oClear = bb.selector.query(oTabContainer, '.btl-tabBox-head-height');
					var oNodeAfter = event.target.getProperty('nextSibling');
					oTabContainer.insertBefore( event.target.__tabhead, oNodeAfter ? oNodeAfter.__tabhead : oClear);
				}
			]]></d:handler>

			<d:handler event="reflow" type="text/javascript"><![CDATA[
				var iSelectedIndex = this.getProperty('selectedIndex');
				var aElements = this.getProperty('elements');
				var oSelectedTab = aElements[iSelectedIndex];;
				for (var i = 0, iMax = aElements.length; iMax > i; i++) {
					aElements[i].viewNode.style.height = 'auto';
					bb.html.removeClass(aElements[i].viewNode, 'btl-tab-content-selected');
					bb.html.removeClass(aElements[i].__tabhead, 'btl-tab-selected');
				}
				if(oSelectedTab){
					bb.html.addClass(oSelectedTab.viewNode, 'btl-tab-content-selected');
					bb.html.addClass(oSelectedTab.__tabhead, 'btl-tab-selected');

					var oElm = bb.selector.query(this.viewNode, '.btl-tabBox-content');

					if (this.hasAttribute('height') && this.getAttribute('height') !== 'auto') {
						btl.html.stretch(oElm);
						btl.html.stretch(oSelectedTab.viewNode);
					} else {
						oElm.style.height = '';
						oSelectedTab.viewNode.style.height = '';
					}
				}
			]]></d:handler>

			<d:handler event="selectionChanged" type="text/javascript"><![CDATA[
				this.setProperty('focusTab', this.getProperty('elements')[this.getProperty('selectedIndex')]);
			]]></d:handler>

			<d:handler event="construct" type="text/javascript"><![CDATA[
				var oTabContainer = bb.selector.query(this.viewNode, '.btl-tabBox-tabContainer');
				var oClear = bb.selector.query(oTabContainer, '.btl-tabBox-head-height');
				var aElements = this.getProperty('elements');
				for (var i = 0, iMax = aElements.length; iMax > i; i++){
					oTabContainer.insertBefore(aElements[i].__tabhead, oClear);
				}
			]]></d:handler>

			<d:handler event="mousedown" type="text/javascript"><![CDATA[
				if(event.target.getProperty("parentNode") == this && btl.containsElement(event.target.__tabhead, event.viewTarget)){
					var oTab = event.target;
					if(!oTab.getProperty('disabled')){
						this.__passingFocus = true;
						this.focus();
						this.setProperty('focusTab', oTab);
						event.preventDefault();
					}
				}
			]]></d:handler>

			<d:handler event="focus" type="text/javascript"><![CDATA[
				this.setProperty('focusTab', this.getProperty('elements')[this.getProperty('selectedIndex')]);
			]]></d:handler>

			<d:handler event="blur" type="text/javascript"><![CDATA[
				this.setProperty('focusTab', null);
			]]></d:handler>

			<d:handler event="keydown" type="text/javascript"><![CDATA[
				if((event.target == this) || event.viewTarget == this.getProperty('focusElement')){
					var aElements = this.getProperty('elements');
					var oTab = this.getProperty('focusTab');

					if(!oTab){
						oTab = aElements[this.getProperty('selectedIndex')];
					}

					var bNext, bPrev;
					if( this.getAttribute('direction') == 'rtl' ){
						bNext = event.keyIdentifier == 'Left';
						bPrev = !bNext && event.keyIdentifier == 'Right';
					} else {
						bNext = event.keyIdentifier == 'Right';
						bPrev = !bNext && event.keyIdentifier == 'Left';
					}

					if((event.keyIdentifier == "Enter" || event.keyIdentifier == "U+0020")) {
						if(oTab.getProperty('disabled')){
							return;
						}
						oTab.setProperty('selected', true);
						event.preventDefault();
					} else if (bNext) {
						for(var oNext = oTab.getProperty('nextSibling');;oNext = oNext.getProperty('nextSibling')){
							if(!oNext){
								oNext = this.getProperty('firstChild');
							}
							if(oNext && bb.instanceOf(oNext, btl.namespaceURI, 'tab') && !oNext.getProperty('disabled') && (oNext.getAttribute('display').toLowerCase() != 'none') || oNext == oTab){
								break;
							}
						}
						if(!oNext.getProperty('disabled') && (oNext.getAttribute('display').toLowerCase() != 'none')) {
							this.setProperty('focusTab', oNext);
						}
						event.preventDefault();
					} else if (bPrev) {
						for(var oNext = oTab.getProperty('previousSibling');;oNext = oNext.getProperty('previousSibling')){
							if(!oNext){
								var aElements = this.getProperty('childNodes');
							 	oNext = aElements[aElements.length-1];
							}
							if(oNext && bb.instanceOf(oNext, btl.namespaceURI, 'tab') && !oNext.getProperty('disabled') && (oNext.getAttribute('display').toLowerCase() != 'none') || oNext == oTab){
								break;
							}
						}
						if(!oNext.getProperty('disabled') && (oNext.getAttribute('display').toLowerCase() != 'none')) {
							this.setProperty('focusTab', oNext);
						}
						event.preventDefault();
					}
				this.__passingFocus = false;
				}
			]]></d:handler>
		</d:element>

		<d:element name="tab" extends="b:tabBase">
			

			<d:resource type="application/xhtml+xml" name="tabContent"><![CDATA[
				]]><div class="btl-tab-content btl-chameleon-normalText btl-chameleon-normalBackground" tabindex="-1"/><![CDATA[
			]]></d:resource>

			<d:resource type="application/xhtml+xml" name="tab"><![CDATA[
				]]><div class="btl-tab">
					<div class="btl-tab-background">
						<div class="btl-tab-left">
							<div class="btl-tab-right">
								<div class="btl-tab-mid">
									<div class="btl-focusIndicatorContainer">
										<div class="btl-focusIndicator">
											<div class="btl-tab-label btl-label btl-chameleon-normalText"> </div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div><![CDATA[
			]]></d:resource>

			<d:template type="text/javascript">
				//tab
				var oTabHead = bb.getResource(this, 'tab').cloneNode(true);
				oTabHead.controller = this;
				bb.html.disableUserSelect(oTabHead);

				// set property to store the tab element so it can be used later
				this.__tabhead = oTabHead;
				this.__tabheadInner = bb.selector.query(oTabHead, '.btl-tab-background');

				//content
				var oTab = bb.getResource(this, 'tabContent').cloneNode(true);
				return [oTab, oTab];
			</d:template>

			<d:attribute name="title" onmap="this.__tabhead.title = value"/>

			<d:attribute name="display">
				<d:mapper type="text/javascript"><![CDATA[
				 	this.viewNode.style.display = value;
				 	this.__tabhead.style.display = value;
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="opacity">
				<d:mapper type="text/javascript"><![CDATA[
					bb.html.setStyle(this.viewNode, name, value);
					bb.html.setStyle(this.__tabhead, name, value);
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="visibility">
				<d:mapper type="text/javascript"><![CDATA[
				 	this.viewNode.style.visibility = value;
				 	this.__tabhead.style.visibility = value;
				]]></d:mapper>
			</d:attribute>

			<d:property name="iconElement" onget="return bb.selector.query(this.__tabhead, '.btl-label')"/>

			<d:property name="labelGate" onget="return bb.selector.query(this.__tabhead, '.btl-label')"/>

			<d:method name="disableView">
				<d:body type="text/javascript"><![CDATA[
					this.callSuper('disableView');
					bb.html.addClass(this.__tabhead, 'btl-disabled');
				]]></d:body>
			</d:method>

			<d:method name="enableView">
				<d:body type="text/javascript"><![CDATA[
					this.callSuper('enableView');
					bb.html.removeClass(this.__tabhead, 'btl-disabled');
				]]></d:body>
			</d:method>

			<d:handler event="mouseenter" match=".btl-tab" type="text/javascript"><![CDATA[
				bb.html.addClass(this.__tabhead, 'btl-tab-hover');
				bb.html.addClass(this.__tabheadInner, 'btl-chameleon-highlightBackgroundAsBorder');
			]]></d:handler>

			<d:handler event="mouseleave" match=".btl-tab" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.__tabhead, 'btl-tab-hover');
				bb.html.removeClass(this.__tabheadInner, 'btl-chameleon-highlightBackgroundAsBorder');
			]]></d:handler>

			<d:handler event="mousedown" match=".btl-tab" type="text/javascript"><![CDATA[
				bb.html.replaceClass(this.__tabheadInner, 'btl-chameleon-highlightBackgroundAsBorder', 'btl-chameleon-activeBackgroundAsBorder');
			]]></d:handler>

			<d:handler event="mouseup" match=".btl-tab" type="text/javascript"><![CDATA[
				bb.html.replaceClass(this.__tabheadInner, 'btl-chameleon-activeBackgroundAsBorder', 'btl-chameleon-highlightBackgroundAsBorder');
			]]></d:handler>

			<d:handler event="DOMNodeRemoved" type="text/javascript"><![CDATA[
				if(event.target == this){
					var oParent = this.__tabhead.parentNode;
					if(oParent){
						oParent.removeChild(this.__tabhead);
					}
				}
			]]></d:handler>

			<d:handler event="click" match=".btl-tab" type="text/javascript"><![CDATA[
				if(event.button == 0) {
					var oParent = this.getProperty('parentNode');
					var aElements = oParent.getProperty('elements');
					var iIndex = 0;
					for(var i = 0, iMax = aElements.length; iMax > i; i++){
						iIndex = i;
						if(aElements[i] == this){
							break;
						}
					}
					oParent.setProperty('selectedIndex', iIndex);
				}
			]]></d:handler>
		</d:element>
	</d:namespace>
</d:tdl>